<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习01</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="./001.css">
    <style type="text/css">
        .input-group-addon {
            background: #0033cc;
            color: #ffffff;
        }

        .input-group {
            width: 400px;
        }
    </style>
</head>
<body>
<div id="app" style="width: 700px;margin: 50px auto">
    <div>
        <div class="input-group">
            <input type="text" class="form-control" v-model="search">
            <span class="input-group-addon" id="basic-addon2">搜索</span>
        </div>
        <table class="table table-striped table-hover">
            <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>工号</th>
                <th>岗位</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in searchList">
                <td>{{item.names}}</td>
                <td>{{item.sex | formatterSex}}</td>
                <td>{{item.age}}</td>
                <td>{{item.number}}</td>
                <td>{{item.post}}</td>
                <td>
                    <com
                     :rowdata="item"
                     :index="index"
                     :list="searchList"
                     :content="SubmitText"
                     @resets="ResetText"
                     @deltext="DelContent"
                    ></com>
<!--                    <span @click="eliminate" data-toggle="modal" data-target="#myModal">新增</span>
                    <span @click="edit(index)" data-toggle="modal" data-target="#myModal">编辑</span>
                    <span @click="del(index)">删除</span>-->
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <!-- 模态框（Modal） -->
    <div>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            新增员工信息
                        </h4>
                    </div>

                    <form action="">
                        <div class="information">
                            <ul>
                                <input type="hidden" v-model="SubmitText.index">
                                <li><span>姓名</span><input type="text" v-model="SubmitText.names"></li>
                                <li><span>性别</span>
                                    <input class="sex" type="radio" value="1" v-model="SubmitText.sex"/>男
                                    <input class="sex" type="radio" value="2" v-model="SubmitText.sex"/>女
                                </li>
                                <li><span>年龄</span><input type="text" v-model="SubmitText.age"></li>
                                <li><span>工号</span><input type="text" v-model="SubmitText.number"></li>
                                <li><span>岗位</span><input type="text" v-model="SubmitText.post"></li>
                            </ul>
                        </div>
                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button @click="Submit" type="button" data-dismiss="modal" class="btn btn-primary">
                            确定
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>
</div>
<template id="com">
    <div>
        <span @click="eliminate" data-toggle="modal" data-target="#myModal">新增</span>
        <span @click="edit" data-toggle="modal" data-target="#myModal">编辑</span>
        <span @click="del">删除</span>
    </div>
</template>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                list: [
                    {names: '张三', sex: '1', age: '18', number: '10012', post: '高级前端开发工程师'},
                    {names: '李四', sex: '2', age: '25', number: '10014', post: '中级前端开发工程师'},
                    {names: '王五', sex: '1', age: '23', number: '10013', post: '初级前端开发工程师'},
                    {names: '小二', sex: '2', age: '21', number: '10052', post: '项目总监'}
                ],
                search: '',
                SubmitText: {
                    index: '',
                    names: '',
                    sex: '1',
                    age: '',
                    number: '',
                    post: ''
                }
            }
        },
        components:{
            com:{
                props:{
                    // 索引
                    index: {
                        type: Number,
                    },

                    rowdata: {
                        type: Object,
                    },

                    list: {
                        type: Array,
                    },

                    content:{
                        type: Object,
                    }
                },
                template:'#com',
                methods: {
                    //新增页面   清除数据
                    eliminate() {
                        var Reset = {index: '', names: '', sex: '2', age: '', number: '', post: ''};
                        this.$emit('resets',Reset)
                    },
                    //删除
                    del() {
                        this.list.splice(this.index, 1);
                        this.$emit('deltext',this.list)
                    },
                    //编辑页面
                    edit() {
                        /*// this.SubmitText.names = this.list[index].names;
                        //   // this.SubmitText = this.list[index];
                        // console.log(this.list[index].names)*/
                        var index = this.index;
                        var srt = this.list[index];
                        this.content.index = index;
                        // var copycontent = JSON.parse(JSON.stringify(this.content));
                        for (const indexKey in srt) {
                            this.content[indexKey] = srt[indexKey];
                        }
                    }
                },
            }
        },
        methods: {
            //新增 和编辑
            Submit() {
                var index = this.SubmitText.index;
                if (index == '') {//新增
                    this.list.push(this.SubmitText);
                } else if (index !== '') {//编辑
                    this.list.splice(index, 1, this.SubmitText);
                }
            },
            ResetText(val){
                this.SubmitText = val;
            },
            DelContent(val){
                this.list = val;
            }
        },

        filters: {
            formatterSex(val) {
                // console.log(val);
                if (val == '1') {
                    return this.sex = '男'
                } else if (val == '2') {
                    return this.sex = '女'
                }
            }
        },
        computed: {
            searchList() {
                // console.log(this);
                // console.log(this.search)
                let {list, search} = this;
                var result;
                result = list.filter(function (item) {
                    //姓名
                    return (item.names.indexOf(search) != -1 ||
                        //性别
                        item.sex.indexOf(
                            search === '男'
                                ? '1'
                                : search === '女'
                                ? '2'
                                : search,
                        ) != -1 ||
                        //工号
                        item.number.indexOf(search) != -1 ||
                        //岗位
                        item.post.indexOf(search) != -1
                    )
                    // if (item.names.indexOf(search)!=-1){
                    //     return item.names.indexOf(search)!=-1;
                    // }else if (item.sex.indexOf(search)!=-1){
                    //     return item.sex.indexOf(search)!=-1;
                    // }else if (item.number.indexOf(search)!=-1){
                    //     return item.number.indexOf(search)!=-1;
                    // }else if (item.post.indexOf(search)!=-1){
                    //     return item.post.indexOf(search)!=-1;
                    // }
                })
                return result;
            }
        }
    })
</script>


</body>
</html>